<template>
   <div class="bottom">
     <div class="bottomTop">
       <span ref="elecurrentTime">00:00</span>
       <div class="prograss" @click="currentprograss" ref="prograssbar">
         <div class="prograssLine" ref="prograssline">
           <div class="prograssDot"></div>
         </div>
       </div>
       <span ref="eleTotaleTime">00:00</span>
     </div>
     <div class="bottomBottom">
       <div class="xunhuan loop" @click="mode1" ref="modes"></div>
       <div class="prev" @click="prevv"></div>
       <div class="play" @click="play" ref="play"></div>
       <div class="next" @click="nextt"></div>
       <div class="shoucang" @click="favorite" :class="{'active':isFavorite(currentSongs)}"></div>
     </div>
   </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import modeType from '../../store/modeType'
import { formartTime } from '../../../tools/tools'

export default {
  name: 'PlayerBottom',
  methods: {
    ...mapActions([
      'setplay',
      'setMode',
      'setIndexs',
      'setCurrentTimes',
      'setFavoriteSong'
    ]),
    play () {
      this.setplay(!this.isPlay)
    },
    mode1 () {
      if (this.mode === modeType.loop) {
        this.setMode(modeType.one)
      } else if (this.mode === modeType.one) {
        this.setMode(modeType.random)
      } else if (this.mode === modeType.random) {
        this.setMode(modeType.loop)
      }
    },
    prevv () {
      this.setIndexs(this.currentIndex - 1)
    },
    nextt () {
      this.setIndexs(this.currentIndex + 1)
    },
    favorite () {
      this.setFavoriteSong(this.currentSongs)
    },

    currentprograss (e) {
      // const normalLeft = e.target.offsetLeft
      const normalLeft = this.$refs.prograssbar.offsetLeft
      const eventLeft = e.pageX
      const clickLeft = eventLeft - normalLeft
      // const oWidth = e.target.offsetWidth
      const oWidth = this.$refs.prograssbar.offsetWidth
      const value = clickLeft / oWidth
      this.$refs.prograssline.style.width = value * 100 + '%'

      const currentTime = value * this.totaltime
      this.setCurrentTimes(currentTime)
    },
    isFavorite (song) {
      const res = this.favoriteSong.find(function (value) {
        return song.id === value.id
      })
      return res !== undefined
    }
  },
  computed: {
    ...mapGetters([
      'isPlay',
      'mode',
      'currentIndex',
      'currentSongs',
      'favoriteSong'
    ])
  },
  watch: {
    isPlay (newValue, oldValue) {
      if (newValue) {
        this.$refs.play.classList.add('active')
      } else {
        this.$refs.play.classList.remove('active')
      }
    },
    mode (newValue, oldValue) {
      if (newValue === modeType.loop) {
        this.$refs.modes.classList.remove('random')
        this.$refs.modes.classList.add('loop')
      } else if (newValue === modeType.one) {
        this.$refs.modes.classList.remove('loop')
        this.$refs.modes.classList.add('one')
      } else if (newValue === modeType.random) {
        this.$refs.modes.classList.remove('one')
        this.$refs.modes.classList.add('random')
      }
    },
    totaltime (newValue, oldValue) {
      const time = formartTime(newValue)
      this.$refs.eleTotaleTime.innerHTML = time.minute + ':' + time.second
    },
    currentTime (newValue, oldValue) {
      const time = formartTime(newValue)
      this.$refs.elecurrentTime.innerHTML = time.minute + ':' + time.second
      // 进度条移动
      const value = newValue / this.totaltime * 100
      this.$refs.prograssline.style.width = value + '%'
    }
  },
  props: {
    totaltime: {
      type: Number,
      default: 0,
      required: true
    },
    currentTime: {
      type: Number,
      default: 0,
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../assets/css/mixin";
  @import "../../assets/css/variable";
.bottom{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  .bottomTop{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .prograss{
      width: 100%;
      margin: 0 10px;
      height: 10px;
      background: black;
      .prograssLine{
        position: relative;
        width: 0%;
        height: 10px;
        background: #fff;
        .prograssDot{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background: #fff;
          position: absolute;
          left: 100%;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .bottomBottom{
    width: 80%;
    /*padding: 10px 30px;*/
    margin: 0 auto;
    padding: 30px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    div{
      width: 84px;
      height: 84px;
    }
    .xunhuan{
      &.loop{
        @include bg_img('../../assets/images/loop');
      }
      &.one{
        @include bg_img('../../assets/images/one');
      }
      &.random{
        @include bg_img('../../assets/images/shuffle');
      }
    }
    .prev{
      @include bg_img('../../assets/images/prev');
    }
    .play{
      @include bg_img('../../assets/images/play');
      &.active{
        @include bg_img('../../assets/images/pause');
      }
    }
    .next{
      @include bg_img('../../assets/images/next');
    }
    .shoucang{
      @include bg_img('../../assets/images/un_favorite');
      &.active{
        @include bg_img('../../assets/images/favorite');
      }
    }
  }
}
</style>
